import 'package:cunyutech_flutter_ui/cunyutech_flutter_ui.dart';
import 'package:flutter/material.dart';

class TagGroupItem<T> {
  TagGroupItem({
    this.text,
    this.value,
  });
  String text;
  T value;
}

class TagGroup<T> extends StatefulWidget {
  TagGroup({Key key, this.items, this.spacing, this.runSpacing, this.decoration, this.activedColor, this.color,this.fontSize, this.value, this.onChange }) : super(key: key);

  final List<TagGroupItem<T>> items;
  final double spacing;
  final double runSpacing;
  final dynamic value;

  final Decoration decoration; 
  final Color activedColor;
  final Color color;
  final double fontSize;

  final ValueChanged<T> onChange;

  @override
  _TagGroupState createState() => _TagGroupState();
}

class _TagGroupState extends State<TagGroup> {
  @override
  Widget build(BuildContext context) {
    if(widget.items == null) return Container();
    var cs = CYThemeData.of(context);
    var activedDecoration = BoxDecoration(
      color: cs.linkColor,
      borderRadius: CYBorderRadius.smallBorderRadius,
    );
    var decoration = BoxDecoration(
      color: Colors.transparent,
    );
    var activedColor = cs.darkForeColorSystem.primaryColor;
    var color = cs.primaryForeColor;

    return Container(
       child: Wrap(
         alignment: WrapAlignment.start,
         spacing: widget.spacing ?? CYMargin.Default,
         runSpacing: widget.runSpacing ?? CYMargin.Default,
         children: widget.items.map((e) {
          bool actived = e.value == widget.value;
          return GestureDetector(
            onTap: (){
              if(widget.onChange != null) {
                widget.onChange(e.value);
              }
            },
            child: Container(
              height: CYHeight.Middle,
              padding: EdgeInsets.symmetric(horizontal: 10),
              decoration: widget.decoration ?? (actived ? activedDecoration : decoration),
              child: CYParagraph(
                e.text, 
                fontSize: widget.fontSize ?? CYFontSize.Large,
                color: widget.color ?? (actived ? activedColor : color)
              ),
            ),
          );
         }
        ).toList()
       )
    );
  }
}